<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="档案详情">
				<view slot="center" class="navTitle">
					档案详情 
				</view>
			</u-navbar>
			<view class="pd30">
				<view class="filterBlock">
					<view class="block">
						<view class="full">
							<DateRange @change="dateRangeChange"></DateRange>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true"  @scroll="updateScroll" :scroll-top="scrollTop" class="scrollView pt30">
				<view class="pd30">
					<view class="archivesDetail" v-if="info">
						<view class="item" v-for="(i,index) in info.list">
							<view class="idate">
								{{i.date|dateFormate('YYYY-MM-DD hh:mm')}}
							</view>
							<view class="box1 box" v-if="i.type==0">
								<view class="bt">
									{{i.title}}
								</view>
								<view class="ul">
									<view class="li">
										<view class="ll">
											访谈时间
										</view>
										<view class="lr">
											{{i.InterviewTime|dateFormate('YYYY-MM-DD hh:mm')}}
										</view>
									</view>
									<view class="li">
										<view class="ll">
											负责教师
										</view>
										<view class="lr">
											{{i.InterviewTeacher}}
										</view>
									</view>
								</view>
								<view class="btns">
									<navigator open-type="navigate" :url="'/subpage/teacher/archives/consultingDetail?id='+i.id" class="navigator btn">
										查看详情
									</navigator>
								</view>
							</view>
							<view class="box2 box" v-if="i.type==1">
								<view class="bl">
									<view class="bt">
										{{i.title}}
									</view>
									<view class="btns">
										<navigator open-type="navigate" :url="'/subpage/viewTest/viewTest?id='+i.id" class="navigator btn">
											查看详情
										</navigator>
									</view>
								</view>
								<view class="br">
									<view class="stageTag" :style="'color:'+stageOption(i.stage).color+';background:'+stageOption(i.stage).bgColor">
										{{stageOption(i.stage).label}}
									</view>
								</view>
							</view>
							<view class="box3 box" v-if="i.type==2">
								<view class="bl">
									{{i.title}}
								</view>
								<view class="br">
									<view class="stageTag2" :style="'color:'+stageOption(i.stage).color+';background:'+stageOption(i.stage).bgColor">
										{{stageOption(i.stage).label}}
									</view>
								</view>
							</view>
							<view class="box3 box" v-if="i.type==3">
								<view class="bl">
									{{i.title}}
								</view>
								<view class="br btns">
									<navigator open-type="navigate" :url="'/subpage/teacher/intervene/history?id='+i.id" class="navigator btn">
										查看详情
									</navigator>
								</view>
							</view>
						</view>
					</view>
					<u-overlay :show="isLoading" :opacity="0.2">
						<u-loadmore color="#fff" iconColor="#fff" status="loading" />
					</u-overlay>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow:function(){
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			if(page.options['id']){
				this.$data.itemid = page.options['id'];
			}
		},
		data() {
			return {
				itemid:'',
				oldScrollTop:0,
				scrollTop:0,
				startDate:'',
				endDate:'',
				info:'',
				isLoading:false
			}
		},
		watch:{
			itemid:function(){
				this.getInfo();
			}
		},
		methods: {
			dateRangeChange(e){//日期范围变化
				var that=this;
				that.startDate=e.start;
				that.endDate=e.end;
				that.getInfo();
			},
			updateScroll(e){
				this.oldScrollTop=e.detail.scrollTop;
			},
			getInfo(){
				var that=this;
				if(that.isLoading){return;};
				that.isLoading=true;
				that.scrollTop=that.oldScrollTop;
				that.$nextTick(function() {
					that.scrollTop = 0
				});
				let timer=setTimeout(function(){
					//请求开始
					//type:0访谈记录，1心理测评，2危机评估，3干预措施
					var res={
						id:101,
						list:[
							{
								date:'2024-09-11 12:00',
								type:0,
								title:'心理咨询访谈记录',
								id:101,
								InterviewTime:'2024-09-10  11:00-12:00',
								InterviewTeacher:'李老师'
							},
							{
								id:101,
								date:'2024-09-10 10:50',
								type:1,
								title:'2024新生开学心理测评',
								stage:1
							},
							{
								id:102,
								date:'2024-09-10 08:55',
								type:2,
								title:'危机评估等级',
								stage:1
							},
							{
								id:102,
								date:'2024-09-09 08:30',
								type:3,
								title:'危机干预措施'
							},
							{
								id:102,
								date:'2024-09-08 16:30',
								type:2,
								title:'危机评估等级',
								stage:4
							},
							{
								id:102,
								date:'2024-09-08 14:30',
								type:1,
								title:'2024新生开学心理测评',
								stage:4
							}
						]
					};
					that.info=res;
					that.isLoading=false;
					//end
					clearTimeout(timer);
				},300);
			}
		},
		computed:{
			
		},
		mounted(){
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.slot-content{
		flex: 0 0 auto;
		width: 100%;
	}
	/deep/.u-popup__content{
		border-radius: 30rpx !important;
		.u-modal__title{
			font-size: 40rpx !important;
			color: #65554d !important;
			padding-top: 40rpx !important;
			line-height: 1;
			font-weight: normal !important;
		}
		.u-modal__content{
			padding: 40rpx 40rpx 0 !important;
		}
		.u-line{
			display: none;
		}
		.u-modal__button-group__wrapper{
			height: 120rpx;
			border-radius: 0 !important;
			.u-modal__button-group__wrapper__text{
				font-size: 28rpx !important;
			}
		}
	}
	.filterBlock{
		padding-top: 20rpx;
		.block{
			.search{
				background: #fff;
				border-color: #fff;
				margin-left: 10rpx;
			}
		}
		.select{
			margin-left: 0;
			width: 280rpx;
			/deep/ .uni-select{
				background: #fff !important;
				border-color: #fff !important;
			}
		}
	}
</style>
